<template>
	<view class="video-input">
		<view class="flex justify-between item-center mb-16">
			<view><text>视频</text></view>
			<view class="flex item-center">
				<view class="action-btn" :class="sort===0 ? 'disabled' : ''" @click="onActionClick('up')"><text>上移</text></view>
				<view class="action-btn" :class="isLast ? 'disabled' : ''" @click="onActionClick('down')"><text>下移</text></view>
				<view class="action-btn" :class="sort===0 ? 'disabled' : ''" @click="onActionClick('top')"><text>置顶</text></view>
				<view class="action-btn" @click="onActionClick('add')"><text>添加</text></view>
				<view class="action-btn" @click="onActionClick('del')"><text>移除</text></view>
			</view>
		</view>
		<view class="mb-16">
			<video :src="modelValue" @click="onActionClick('more')" />
		</view>
	</view>
</template>

<script setup>
	
	const props = defineProps({
		isLast: {
			type: Boolean
		},
		sort: {
			type: Number,
			default: 0
		},
		modelValue: {
			type: String
		}
	})
	
	const emits = defineEmits(['onActionClick'])
	
	const onActionClick = (type) => {
		switch (type) {
			case 'up':
				if (props.sort === 0) return
				break
			case 'down':
				if (props.isLast) return
				break
			case 'top':
				if (props.sort === 0) return
				break
			default:
		}
		emits('onActionClick', type, props.modelValue, props.sort)
	}
</script>

<style lang="scss" scoped>
	.video-input {
		color: #333;
	}
	.action-btn {
		margin-left: 12px;
		display: flex;
		padding: 2px 6px;
		justify-content: center;
		align-items: center;
		border-radius: 4px;
		border: 1px solid #9C9C9C;
		color: #5E5F61;
		font-size: 12px;
		font-weight: 400;
		
		&.disabled {
			color: #9C9C9C;
		}
	}
</style>